<template>
  <div class="container-fluid" id="course" v-if="sections">
    <div class="iframes1 row" v-loading="!loading" element-loading-text="拼命加载中">
      <iframe v-on="{load}" class="iframes col" :src="iframes && iframes.url" frameborder="0"></iframe>
      <div v-show="iflodding" class="iframes col positions"></div>
    </div>
    <transition name="el-zoom-in-bottom">
      <moves
        v-if="show"
        v-bind="{scratchheightset, scratchwidthset, ifloddingset, isShow,dragMinHeight:scratchheight,dragMinWidth:scratchwidth,title: getCourse.find(v=>v.ID==cid).name,border:value2,tiaoguo:$refs,getvideodialogVisible }"
      >
        <router-view  ref="sections" v-bind="{lid:sections.ID, question, scratchheight, scratchwidth, value2}"></router-view>
      </moves>
    </transition>
    <div class="position-fixed fixed-s">
      <div>
        <a href="/qq.html" target="_blank">
          <i class="icon-QQ icon iconfont"></i>
        </a>
      </div>
      <div @click="comeshow">
        <i class="icon-shipin icon iconfont"></i>
      </div>
      <div class="chengxu1" v-for="(v,i ) in teacherfile" :key="`2bottombar${i}`">
        <a :href="v.fileurl">
          <i class="icon iconfont" :class="v.info.type == 1?'icon-daima':'icon-courseware'"></i>
        </a>
      </div>
      <div class="chengxu1" v-for="(v,i ) in files" :key="`3bottombar${i}`">
        <a :href="v.file_URL">
          <i class="icon iconfont icon-tubiaozhizuomoban"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import aliplayer from "../aliplayer/index.vue";
import {
  asyncvideoQuestion,
  asyncgetLessionByCourseid,
  asyncgetCourseFile,
  asyncselectCoursefile,
  asyncgetiframebycourseid
} from "../../../plugins/api.js";
import moves from "@/components/xiaofei/moves.vue";
import { mapGetters } from "vuex";
import _ from "underscore";
export default {
  name: "scratch",
  data() {
    return {
      value2: false,
      loading: false,
      sections: false,
      input5: "",
      files: false,
      question: [],
      couse1: [],
      teacherfile: [],
      iframes: null,
      scratchheight: 472,
      scratchwidth: 787,
      iflodding: false,
      show: true
    };
  },
  props: ["cid", "num"],
  computed: mapGetters(["getuser", "getCourse", "getvideodialogVisible"]),
  watch: {
    $route() {
      this.start();
    },
    async cid() {
      try {
        this.files = await asyncgetCourseFile({ cid: this.cid });
      } catch (err) {
        console.log(err);
      }
    }
  },
  async mounted() {
    this.start();
    try {
      this.files = await asyncgetCourseFile({ cid: this.cid });
    } catch (err) {
      console.log(err);
    }
    // $(".qidian_wpa_img").css({
    //   display: "block",
    //   left: "auto",
    //   right: "26px",
    //   top: "179px",
    //   bottom: "auto"
    // });
  },
  methods: {
    load() {
      this.value2 = true;
      this.loading = true;
    },
    isShow(i) {
      if (i) {
        this.value2 = false;
      } else {
        this.show = false;
      }
    },
    ppts() {
      let arr = ["Tourist", "User", "Student"];

      if (_.indexOf(arr, this.getuser.usertype) == -1) {
        return true;
      } else {
        return false;
      }
    },
    kturl(v) {
      //教师课件资料
      let data = [
        "https://hte-public.oss-cn-qingdao.aliyuncs.com/1BA67F1C-C720-4d18-BAD9-8B1510AD8D2E.png",
        "https://hte-public.oss-cn-qingdao.aliyuncs.com/ECD0639D-5E6E-4867-9B96-D996D3E1CDE8.png"
      ];
      let s = v.info.type;
      return data[s];
    },
    link(v) {
      if (v == this.num) {
        return "background:rgba(0,0,0,.2)";
      }
    },
    agent(v) {
      //判断电脑型号
      var agent = navigator.userAgent.toLowerCase();
      let system, arch;
      if (agent.indexOf("windows") != -1) {
        if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
          arch = "64";
        } else {
          arch = "32";
        }
        system = "windows";
        if (v.system == system && v.arch == arch) {
          return true;
        }
      } else if (agent.indexOf("mac") != -1) {
        system = "mac";
        if (v.system == system) {
          return true;
        }
      } else {
        return true;
      }
      return false;
    },
    async start() {
      let cid = this.cid;
      let num = this.num;
      try {
        this.couse1 = await asyncgetLessionByCourseid({ cid: cid });
        this.teacherfile = await asyncselectCoursefile({ cid: cid });
        this.iframes = await asyncgetiframebycourseid({ cid });
        for (let v of this.couse1) {
          if (v.num == num) {
            this.sections = v;
            this.question = await asyncvideoQuestion({ lid: this.sections.ID });
          }
        }
      } catch (err) {
        this.$alert("课程马上开放请先观看其他课程");
        this.$router.push("/allclass");
      }
    },
    total() {
      return this.couse1.length;
    },
    scratchheightset(v) {
      this.scratchheight = v;
    },
    scratchwidthset(v) {
      this.scratchwidth = v;
    },
    ifloddingset(v) {
      this.iflodding = v;
    },
    comeshow() {
      this.value2 = true;
      this.show = true;
    }
  },
  components: {
    aliplayer,
    moves
  }
};
</script>


<style scoped>
.iframes1 {
  min-height: 750px;
  margin-top: 15px;
}
.positions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.fixed-s {
  width: 99px;
  background-color: #ffffff;
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.17);
  border-radius: 15px;
  right: 0px;
  top: 150px;
  z-index: 3000;
}
.fixed-s div {
  height: 100px;
  color: #2f81f1;
  font-size: 45px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.fixed-s .iconfont {
  color: #2f81f1;
  font-size: 45px;
}

#course {
  max-width: 1701px;
  margin: 20px auto;
  min-height: 850px;
  margin-top: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 15px;
}
</style>